<template>
  <div id="box">
    <el-button type="primary" @click="bing()">饼状图组件</el-button>
    <el-button type="primary" @click="zhu()">柱状图组件</el-button>
    <el-button type="primary" @click="zhe()">折线图组件</el-button>
    <!-- <el-button type="primary" @click="wangge()">网格图组件</el-button> -->
    <el-button type="primary" @click="qipao()">气泡图组件</el-button>
    <el-button type="primary" @click="leida()">雷达图组件</el-button>
    <el-button type="primary" @click="reli()">热力图组件</el-button>
    <div id="echarts" style="width: 100%;height: 500px;"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts';
  export default {
    mounted() {
      this.bing()
    },
    methods: {
      bing() {
        let chartDom = document.getElementById('echarts');
        let myChart = echarts.init(chartDom, 'dark');
        let optionbing;
        optionbing = {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            top: '5%',
            left: 'center'
          },
          series: [{
            name: '人数统计',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [{
                value: 1048,
                name: '上海'
              },
              {
                value: 735,
                name: '北京'
              },
              {
                value: 580,
                name: '广州'
              },
              {
                value: 484,
                name: '深圳'
              },
              {
                value: 300,
                name: '成都'
              }
            ]
          }]
        };

        optionbing && myChart.setOption(optionbing);
      },
      zhu() {
        let chartDom = document.getElementById('echarts');
        let myChart = echarts.init(chartDom, 'dark');
        let option;

        option = {
          xAxis: {
            type: 'category',
            data: ['成都', '重庆', '西安', '北京', '上海', '广州', '深圳']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }]
        };

        option && myChart.setOption(option);
      },
      zhe() {
        let chartDom = document.getElementById('echarts');
        let myChart = echarts.init(chartDom, 'dark');
        let option;

        option = {
          xAxis: {
            type: 'category',
            data: ['成都', '重庆', '西安', '北京', '上海', '广州', '深圳']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'line',
            symbol: 'triangle',
            symbolSize: 20,
            lineStyle: {
              color: '#5470C6',
              width: 4,
              type: 'dashed'
            },
            itemStyle: {
              borderWidth: 3,
              borderColor: '#EE6666',
              color: 'yellow'
            }
          }]
        };

        option && myChart.setOption(option);

      },
      wangge() {
        var chartDom = document.getElementById('echarts');
        var myChart = echarts.init(chartDom, 'dark');
        var option;

        var data = [{
            name: '海门',
            value: 9
          },
          {
            name: '鄂尔多斯',
            value: 12
          },
          {
            name: '招远',
            value: 12
          },
          {
            name: '舟山',
            value: 12
          },
          {
            name: '齐齐哈尔',
            value: 14
          },
          {
            name: '盐城',
            value: 15
          },
          {
            name: '赤峰',
            value: 16
          },
          {
            name: '青岛',
            value: 18
          },
          {
            name: '乳山',
            value: 18
          },
          {
            name: '金昌',
            value: 19
          },
          {
            name: '泉州',
            value: 21
          },
          {
            name: '莱西',
            value: 21
          },
          {
            name: '日照',
            value: 21
          },
          {
            name: '胶南',
            value: 22
          },
          {
            name: '南通',
            value: 23
          },
          {
            name: '拉萨',
            value: 24
          },
          {
            name: '云浮',
            value: 24
          },
          {
            name: '梅州',
            value: 25
          },
          {
            name: '文登',
            value: 25
          },
          {
            name: '上海',
            value: 25
          },
          {
            name: '攀枝花',
            value: 25
          },
          {
            name: '威海',
            value: 25
          },
          {
            name: '承德',
            value: 25
          },
          {
            name: '厦门',
            value: 26
          },
          {
            name: '汕尾',
            value: 26
          },
          {
            name: '潮州',
            value: 26
          },
          {
            name: '丹东',
            value: 27
          },
          {
            name: '太仓',
            value: 27
          },
          {
            name: '曲靖',
            value: 27
          },
          {
            name: '烟台',
            value: 28
          },
          {
            name: '福州',
            value: 29
          },
          {
            name: '瓦房店',
            value: 30
          },
          {
            name: '即墨',
            value: 30
          },
          {
            name: '抚顺',
            value: 31
          },
          {
            name: '玉溪',
            value: 31
          },
          {
            name: '张家口',
            value: 31
          },
          {
            name: '阳泉',
            value: 31
          },
          {
            name: '莱州',
            value: 32
          },
          {
            name: '湖州',
            value: 32
          },
          {
            name: '汕头',
            value: 32
          },
          {
            name: '昆山',
            value: 33
          },
          {
            name: '宁波',
            value: 33
          },
          {
            name: '湛江',
            value: 33
          },
          {
            name: '揭阳',
            value: 34
          },
          {
            name: '荣成',
            value: 34
          },
          {
            name: '连云港',
            value: 35
          },
          {
            name: '葫芦岛',
            value: 35
          },
          {
            name: '常熟',
            value: 36
          },
          {
            name: '东莞',
            value: 36
          },
          {
            name: '河源',
            value: 36
          },
          {
            name: '淮安',
            value: 36
          },
          {
            name: '泰州',
            value: 36
          },
          {
            name: '南宁',
            value: 37
          },
          {
            name: '营口',
            value: 37
          },
          {
            name: '惠州',
            value: 37
          },
          {
            name: '江阴',
            value: 37
          },
          {
            name: '蓬莱',
            value: 37
          },
          {
            name: '韶关',
            value: 38
          },
          {
            name: '嘉峪关',
            value: 38
          },
          {
            name: '广州',
            value: 38
          },
          {
            name: '延安',
            value: 38
          },
          {
            name: '太原',
            value: 39
          },
          {
            name: '清远',
            value: 39
          },
          {
            name: '中山',
            value: 39
          },
          {
            name: '昆明',
            value: 39
          },
          {
            name: '寿光',
            value: 40
          },
          {
            name: '盘锦',
            value: 40
          },
          {
            name: '长治',
            value: 41
          },
          {
            name: '深圳',
            value: 41
          },
          {
            name: '珠海',
            value: 42
          },
          {
            name: '宿迁',
            value: 43
          },
          {
            name: '咸阳',
            value: 43
          },
          {
            name: '铜川',
            value: 44
          },
          {
            name: '平度',
            value: 44
          },
          {
            name: '佛山',
            value: 44
          },
          {
            name: '海口',
            value: 44
          },
          {
            name: '江门',
            value: 45
          },
          {
            name: '章丘',
            value: 45
          },
          {
            name: '肇庆',
            value: 46
          },
          {
            name: '大连',
            value: 47
          },
          {
            name: '临汾',
            value: 47
          },
          {
            name: '吴江',
            value: 47
          },
          {
            name: '石嘴山',
            value: 49
          },
          {
            name: '沈阳',
            value: 50
          },
          {
            name: '苏州',
            value: 50
          },
          {
            name: '茂名',
            value: 50
          },
          {
            name: '嘉兴',
            value: 51
          },
          {
            name: '长春',
            value: 51
          },
          {
            name: '胶州',
            value: 52
          },
          {
            name: '银川',
            value: 52
          },
          {
            name: '张家港',
            value: 52
          },
          {
            name: '三门峡',
            value: 53
          },
          {
            name: '锦州',
            value: 54
          },
          {
            name: '南昌',
            value: 54
          },
          {
            name: '柳州',
            value: 54
          },
          {
            name: '三亚',
            value: 54
          },
          {
            name: '自贡',
            value: 56
          },
          {
            name: '吉林',
            value: 56
          },
          {
            name: '阳江',
            value: 57
          },
          {
            name: '泸州',
            value: 57
          },
          {
            name: '西宁',
            value: 57
          },
          {
            name: '宜宾',
            value: 58
          },
          {
            name: '呼和浩特',
            value: 58
          },
          {
            name: '成都',
            value: 58
          },
          {
            name: '大同',
            value: 58
          },
          {
            name: '镇江',
            value: 59
          },
          {
            name: '桂林',
            value: 59
          },
          {
            name: '张家界',
            value: 59
          },
          {
            name: '宜兴',
            value: 59
          },
          {
            name: '北海',
            value: 60
          },
          {
            name: '西安',
            value: 61
          },
          {
            name: '金坛',
            value: 62
          },
          {
            name: '东营',
            value: 62
          },
          {
            name: '牡丹江',
            value: 63
          },
          {
            name: '遵义',
            value: 63
          },
          {
            name: '绍兴',
            value: 63
          },
          {
            name: '扬州',
            value: 64
          },
          {
            name: '常州',
            value: 64
          },
          {
            name: '潍坊',
            value: 65
          },
          {
            name: '重庆',
            value: 66
          },
          {
            name: '台州',
            value: 67
          },
          {
            name: '南京',
            value: 67
          },
          {
            name: '滨州',
            value: 70
          },
          {
            name: '贵阳',
            value: 71
          },
          {
            name: '无锡',
            value: 71
          },
          {
            name: '本溪',
            value: 71
          },
          {
            name: '克拉玛依',
            value: 72
          },
          {
            name: '渭南',
            value: 72
          },
          {
            name: '马鞍山',
            value: 72
          },
          {
            name: '宝鸡',
            value: 72
          },
          {
            name: '焦作',
            value: 75
          },
          {
            name: '句容',
            value: 75
          },
          {
            name: '北京',
            value: 79
          },
          {
            name: '徐州',
            value: 79
          },
          {
            name: '衡水',
            value: 80
          },
          {
            name: '包头',
            value: 80
          },
          {
            name: '绵阳',
            value: 80
          },
          {
            name: '乌鲁木齐',
            value: 84
          },
          {
            name: '枣庄',
            value: 84
          },
          {
            name: '杭州',
            value: 84
          },
          {
            name: '淄博',
            value: 85
          },
          {
            name: '鞍山',
            value: 86
          },
          {
            name: '溧阳',
            value: 86
          },
          {
            name: '库尔勒',
            value: 86
          },
          {
            name: '安阳',
            value: 90
          },
          {
            name: '开封',
            value: 90
          },
          {
            name: '济南',
            value: 92
          },
          {
            name: '德阳',
            value: 93
          },
          {
            name: '温州',
            value: 95
          },
          {
            name: '九江',
            value: 96
          },
          {
            name: '邯郸',
            value: 98
          },
          {
            name: '临安',
            value: 99
          },
          {
            name: '兰州',
            value: 99
          },
          {
            name: '沧州',
            value: 100
          },
          {
            name: '临沂',
            value: 103
          },
          {
            name: '南充',
            value: 104
          },
          {
            name: '天津',
            value: 105
          },
          {
            name: '富阳',
            value: 106
          },
          {
            name: '泰安',
            value: 112
          },
          {
            name: '诸暨',
            value: 112
          },
          {
            name: '郑州',
            value: 113
          },
          {
            name: '哈尔滨',
            value: 114
          },
          {
            name: '聊城',
            value: 116
          },
          {
            name: '芜湖',
            value: 117
          },
          {
            name: '唐山',
            value: 119
          },
          {
            name: '平顶山',
            value: 119
          },
          {
            name: '邢台',
            value: 119
          },
          {
            name: '德州',
            value: 120
          },
          {
            name: '济宁',
            value: 120
          },
          {
            name: '荆州',
            value: 127
          },
          {
            name: '宜昌',
            value: 130
          },
          {
            name: '义乌',
            value: 132
          },
          {
            name: '丽水',
            value: 133
          },
          {
            name: '洛阳',
            value: 134
          },
          {
            name: '秦皇岛',
            value: 136
          },
          {
            name: '株洲',
            value: 143
          },
          {
            name: '石家庄',
            value: 147
          },
          {
            name: '莱芜',
            value: 148
          },
          {
            name: '常德',
            value: 152
          },
          {
            name: '保定',
            value: 153
          },
          {
            name: '湘潭',
            value: 154
          },
          {
            name: '金华',
            value: 157
          },
          {
            name: '岳阳',
            value: 169
          },
          {
            name: '长沙',
            value: 175
          },
          {
            name: '衢州',
            value: 177
          },
          {
            name: '廊坊',
            value: 193
          },
          {
            name: '菏泽',
            value: 194
          },
          {
            name: '合肥',
            value: 229
          },
          {
            name: '武汉',
            value: 273
          },
          {
            name: '大庆',
            value: 279
          }
        ];
        var geoCoordMap = {
          海门: [121.15, 31.89],
          鄂尔多斯: [109.781327, 39.608266],
          招远: [120.38, 37.35],
          舟山: [122.207216, 29.985295],
          齐齐哈尔: [123.97, 47.33],
          盐城: [120.13, 33.38],
          赤峰: [118.87, 42.28],
          青岛: [120.33, 36.07],
          乳山: [121.52, 36.89],
          金昌: [102.188043, 38.520089],
          泉州: [118.58, 24.93],
          莱西: [120.53, 36.86],
          日照: [119.46, 35.42],
          胶南: [119.97, 35.88],
          南通: [121.05, 32.08],
          拉萨: [91.11, 29.97],
          云浮: [112.02, 22.93],
          梅州: [116.1, 24.55],
          文登: [122.05, 37.2],
          上海: [121.48, 31.22],
          攀枝花: [101.718637, 26.582347],
          威海: [122.1, 37.5],
          承德: [117.93, 40.97],
          厦门: [118.1, 24.46],
          汕尾: [115.375279, 22.786211],
          潮州: [116.63, 23.68],
          丹东: [124.37, 40.13],
          太仓: [121.1, 31.45],
          曲靖: [103.79, 25.51],
          烟台: [121.39, 37.52],
          福州: [119.3, 26.08],
          瓦房店: [121.979603, 39.627114],
          即墨: [120.45, 36.38],
          抚顺: [123.97, 41.97],
          玉溪: [102.52, 24.35],
          张家口: [114.87, 40.82],
          阳泉: [113.57, 37.85],
          莱州: [119.942327, 37.177017],
          湖州: [120.1, 30.86],
          汕头: [116.69, 23.39],
          昆山: [120.95, 31.39],
          宁波: [121.56, 29.86],
          湛江: [110.359377, 21.270708],
          揭阳: [116.35, 23.55],
          荣成: [122.41, 37.16],
          连云港: [119.16, 34.59],
          葫芦岛: [120.836932, 40.711052],
          常熟: [120.74, 31.64],
          东莞: [113.75, 23.04],
          河源: [114.68, 23.73],
          淮安: [119.15, 33.5],
          泰州: [119.9, 32.49],
          南宁: [108.33, 22.84],
          营口: [122.18, 40.65],
          惠州: [114.4, 23.09],
          江阴: [120.26, 31.91],
          蓬莱: [120.75, 37.8],
          韶关: [113.62, 24.84],
          嘉峪关: [98.289152, 39.77313],
          广州: [113.23, 23.16],
          延安: [109.47, 36.6],
          太原: [112.53, 37.87],
          清远: [113.01, 23.7],
          中山: [113.38, 22.52],
          昆明: [102.73, 25.04],
          寿光: [118.73, 36.86],
          盘锦: [122.070714, 41.119997],
          长治: [113.08, 36.18],
          深圳: [114.07, 22.62],
          珠海: [113.52, 22.3],
          宿迁: [118.3, 33.96],
          咸阳: [108.72, 34.36],
          铜川: [109.11, 35.09],
          平度: [119.97, 36.77],
          佛山: [113.11, 23.05],
          海口: [110.35, 20.02],
          江门: [113.06, 22.61],
          章丘: [117.53, 36.72],
          肇庆: [112.44, 23.05],
          大连: [121.62, 38.92],
          临汾: [111.5, 36.08],
          吴江: [120.63, 31.16],
          石嘴山: [106.39, 39.04],
          沈阳: [123.38, 41.8],
          苏州: [120.62, 31.32],
          茂名: [110.88, 21.68],
          嘉兴: [120.76, 30.77],
          长春: [125.35, 43.88],
          胶州: [120.03336, 36.264622],
          银川: [106.27, 38.47],
          张家港: [120.555821, 31.875428],
          三门峡: [111.19, 34.76],
          锦州: [121.15, 41.13],
          南昌: [115.89, 28.68],
          柳州: [109.4, 24.33],
          三亚: [109.511909, 18.252847],
          自贡: [104.778442, 29.33903],
          吉林: [126.57, 43.87],
          阳江: [111.95, 21.85],
          泸州: [105.39, 28.91],
          西宁: [101.74, 36.56],
          宜宾: [104.56, 29.77],
          呼和浩特: [111.65, 40.82],
          成都: [104.06, 30.67],
          大同: [113.3, 40.12],
          镇江: [119.44, 32.2],
          桂林: [110.28, 25.29],
          张家界: [110.479191, 29.117096],
          宜兴: [119.82, 31.36],
          北海: [109.12, 21.49],
          西安: [108.95, 34.27],
          金坛: [119.56, 31.74],
          东营: [118.49, 37.46],
          牡丹江: [129.58, 44.6],
          遵义: [106.9, 27.7],
          绍兴: [120.58, 30.01],
          扬州: [119.42, 32.39],
          常州: [119.95, 31.79],
          潍坊: [119.1, 36.62],
          重庆: [106.54, 29.59],
          台州: [121.420757, 28.656386],
          南京: [118.78, 32.04],
          滨州: [118.03, 37.36],
          贵阳: [106.71, 26.57],
          无锡: [120.29, 31.59],
          本溪: [123.73, 41.3],
          克拉玛依: [84.77, 45.59],
          渭南: [109.5, 34.52],
          马鞍山: [118.48, 31.56],
          宝鸡: [107.15, 34.38],
          焦作: [113.21, 35.24],
          句容: [119.16, 31.95],
          北京: [116.46, 39.92],
          徐州: [117.2, 34.26],
          衡水: [115.72, 37.72],
          包头: [110, 40.58],
          绵阳: [104.73, 31.48],
          乌鲁木齐: [87.68, 43.77],
          枣庄: [117.57, 34.86],
          杭州: [120.19, 30.26],
          淄博: [118.05, 36.78],
          鞍山: [122.85, 41.12],
          溧阳: [119.48, 31.43],
          库尔勒: [86.06, 41.68],
          安阳: [114.35, 36.1],
          开封: [114.35, 34.79],
          济南: [117, 36.65],
          德阳: [104.37, 31.13],
          温州: [120.65, 28.01],
          九江: [115.97, 29.71],
          邯郸: [114.47, 36.6],
          临安: [119.72, 30.23],
          兰州: [103.73, 36.03],
          沧州: [116.83, 38.33],
          临沂: [118.35, 35.05],
          南充: [106.110698, 30.837793],
          天津: [117.2, 39.13],
          富阳: [119.95, 30.07],
          泰安: [117.13, 36.18],
          诸暨: [120.23, 29.71],
          郑州: [113.65, 34.76],
          哈尔滨: [126.63, 45.75],
          聊城: [115.97, 36.45],
          芜湖: [118.38, 31.33],
          唐山: [118.02, 39.63],
          平顶山: [113.29, 33.75],
          邢台: [114.48, 37.05],
          德州: [116.29, 37.45],
          济宁: [116.59, 35.38],
          荆州: [112.239741, 30.335165],
          宜昌: [111.3, 30.7],
          义乌: [120.06, 29.32],
          丽水: [119.92, 28.45],
          洛阳: [112.44, 34.7],
          秦皇岛: [119.57, 39.95],
          株洲: [113.16, 27.83],
          石家庄: [114.48, 38.03],
          莱芜: [117.67, 36.19],
          常德: [111.69, 29.05],
          保定: [115.48, 38.85],
          湘潭: [112.91, 27.87],
          金华: [119.64, 29.12],
          岳阳: [113.09, 29.37],
          长沙: [113, 28.21],
          衢州: [118.88, 28.97],
          廊坊: [116.7, 39.53],
          菏泽: [115.480656, 35.23375],
          合肥: [117.27, 31.86],
          武汉: [114.31, 30.52],
          大庆: [125.03, 46.58]
        };
        var convertData = function(data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };

        function renderItem(params, api) {
          console.log(api)
          var coords = [
            [116.7, 39.53],
            [103.73, 36.03],
            [112.91, 27.87],
            [120.65, 28.01],
            [119.57, 39.95]
          ];
          var points = [];
          for (var i = 0; i < coords.length; i++) {
            points.push(api.coord(coords[i]));
          }
          var color = api.visual('color');
          return {
            type: 'polygon',
            shape: {
              points: echarts.graphic.clipPointsByRect(points, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
              })
            },
            style: api.style({
              fill: color,
              stroke: echarts.color.lift(color)
            })
          };
        }
        option = {
          backgroundColor: 'transparent',
          title: {
            text: '全国主要城市',
            subtext: 'data from PM25.in',
            sublink: 'http://www.pm25.in',
            left: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          tooltip: {
            trigger: 'item'
          },
          bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: true,
            mapStyle: {
              styleJson: [{
                  featureType: 'water',
                  elementType: 'all',
                  stylers: {
                    color: '#044161'
                  }
                },
                {
                  featureType: 'land',
                  elementType: 'all',
                  stylers: {
                    color: '#004981'
                  }
                },
                {
                  featureType: 'boundary',
                  elementType: 'geometry',
                  stylers: {
                    color: '#064f85'
                  }
                },
                {
                  featureType: 'railway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'geometry',
                  stylers: {
                    color: '#004981'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#005b96',
                    lightness: 1
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'labels',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry',
                  stylers: {
                    color: '#004981'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#00508b'
                  }
                },
                {
                  featureType: 'poi',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'green',
                  elementType: 'all',
                  stylers: {
                    color: '#056197',
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'subway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'manmade',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'local',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'labels',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'boundary',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#029fd4'
                  }
                },
                {
                  featureType: 'building',
                  elementType: 'all',
                  stylers: {
                    color: '#1a5787'
                  }
                },
                {
                  featureType: 'label',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                }
              ]
            }
          },
          series: [{
              name: 'pm2.5',
              type: 'scatter',
              coordinateSystem: 'bmap',
              data: convertData(data),
              encode: {
                value: 2
              },
              symbolSize: function(val) {
                return val[2] / 10;
              },
              label: {
                formatter: '{b}',
                position: 'right'
              },
              itemStyle: {
                color: '#ddb926'
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {
              name: 'Top 5',
              type: 'effectScatter',
              coordinateSystem: 'bmap',
              data: convertData(
                data
                .sort(function(a, b) {
                  return b.value - a.value;
                })
                .slice(0, 6)
              ),
              encode: {
                value: 2
              },
              symbolSize: function(val) {
                return val[2] / 10;
              },
              showEffectOn: 'emphasis',
              rippleEffect: {
                brushType: 'stroke'
              },
              hoverAnimation: true,
              label: {
                formatter: '{b}',
                position: 'right',
                show: true
              },
              itemStyle: {
                color: '#f4e925',
                shadowBlur: 10,
                shadowColor: '#333'
              },
              zlevel: 1
            },
            {
              type: 'custom',
              coordinateSystem: 'bmap',
              renderItem: renderItem,
              itemStyle: {
                opacity: 0.5
              },
              animation: false,
              silent: true,
              data: [0],
              z: -10
            }
          ]
        };

        option && myChart.setOption(option);
      },
      qipao() {
        let chartDom = document.getElementById('echarts');
        let myChart = echarts.init(chartDom, 'dark');
        let option;

        const dataBJ = [
          [1, 55, 9, 56, 0.46, 18, 6, '良'],
          [2, 25, 11, 21, 0.65, 34, 9, '优'],
          [3, 56, 7, 63, 0.3, 14, 5, '良'],
          [4, 33, 7, 29, 0.33, 16, 6, '优'],
          [5, 42, 24, 44, 0.76, 40, 16, '优'],
          [6, 82, 58, 90, 1.77, 68, 33, '良'],
          [7, 74, 49, 77, 1.46, 48, 27, '良'],
          [8, 78, 55, 80, 1.29, 59, 29, '良'],
          [9, 267, 216, 280, 4.8, 108, 64, '重度污染'],
          [10, 185, 127, 216, 2.52, 61, 27, '中度污染'],
          [11, 39, 19, 38, 0.57, 31, 15, '优'],
          [12, 41, 11, 40, 0.43, 21, 7, '优'],
          [13, 64, 38, 74, 1.04, 46, 22, '良'],
          [14, 108, 79, 120, 1.7, 75, 41, '轻度污染'],
          [15, 108, 63, 116, 1.48, 44, 26, '轻度污染'],
          [16, 33, 6, 29, 0.34, 13, 5, '优'],
          [17, 94, 66, 110, 1.54, 62, 31, '良'],
          [18, 186, 142, 192, 3.88, 93, 79, '中度污染'],
          [19, 57, 31, 54, 0.96, 32, 14, '良'],
          [20, 22, 8, 17, 0.48, 23, 10, '优'],
          [21, 39, 15, 36, 0.61, 29, 13, '优'],
          [22, 94, 69, 114, 2.08, 73, 39, '良'],
          [23, 99, 73, 110, 2.43, 76, 48, '良'],
          [24, 31, 12, 30, 0.5, 32, 16, '优'],
          [25, 42, 27, 43, 1, 53, 22, '优'],
          [26, 154, 117, 157, 3.05, 92, 58, '中度污染'],
          [27, 234, 185, 230, 4.09, 123, 69, '重度污染'],
          [28, 160, 120, 186, 2.77, 91, 50, '中度污染'],
          [29, 134, 96, 165, 2.76, 83, 41, '轻度污染'],
          [30, 52, 24, 60, 1.03, 50, 21, '良'],
          [31, 46, 5, 49, 0.28, 10, 6, '优']
        ];
        const dataGZ = [
          [1, 26, 37, 27, 1.163, 27, 13, '优'],
          [2, 85, 62, 71, 1.195, 60, 8, '良'],
          [3, 78, 38, 74, 1.363, 37, 7, '良'],
          [4, 21, 21, 36, 0.634, 40, 9, '优'],
          [5, 41, 42, 46, 0.915, 81, 13, '优'],
          [6, 56, 52, 69, 1.067, 92, 16, '良'],
          [7, 64, 30, 28, 0.924, 51, 2, '良'],
          [8, 55, 48, 74, 1.236, 75, 26, '良'],
          [9, 76, 85, 113, 1.237, 114, 27, '良'],
          [10, 91, 81, 104, 1.041, 56, 40, '良'],
          [11, 84, 39, 60, 0.964, 25, 11, '良'],
          [12, 64, 51, 101, 0.862, 58, 23, '良'],
          [13, 70, 69, 120, 1.198, 65, 36, '良'],
          [14, 77, 105, 178, 2.549, 64, 16, '良'],
          [15, 109, 68, 87, 0.996, 74, 29, '轻度污染'],
          [16, 73, 68, 97, 0.905, 51, 34, '良'],
          [17, 54, 27, 47, 0.592, 53, 12, '良'],
          [18, 51, 61, 97, 0.811, 65, 19, '良'],
          [19, 91, 71, 121, 1.374, 43, 18, '良'],
          [20, 73, 102, 182, 2.787, 44, 19, '良'],
          [21, 73, 50, 76, 0.717, 31, 20, '良'],
          [22, 84, 94, 140, 2.238, 68, 18, '良'],
          [23, 93, 77, 104, 1.165, 53, 7, '良'],
          [24, 99, 130, 227, 3.97, 55, 15, '良'],
          [25, 146, 84, 139, 1.094, 40, 17, '轻度污染'],
          [26, 113, 108, 137, 1.481, 48, 15, '轻度污染'],
          [27, 81, 48, 62, 1.619, 26, 3, '良'],
          [28, 56, 48, 68, 1.336, 37, 9, '良'],
          [29, 82, 92, 174, 3.29, 0, 13, '良'],
          [30, 106, 116, 188, 3.628, 101, 16, '轻度污染'],
          [31, 118, 50, 0, 1.383, 76, 11, '轻度污染']
        ];
        const dataSH = [
          [1, 91, 45, 125, 0.82, 34, 23, '良'],
          [2, 65, 27, 78, 0.86, 45, 29, '良'],
          [3, 83, 60, 84, 1.09, 73, 27, '良'],
          [4, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
          [5, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
          [6, 109, 81, 121, 1.28, 68, 51, '轻度污染'],
          [7, 106, 77, 114, 1.07, 55, 51, '轻度污染'],
          [8, 89, 65, 78, 0.86, 51, 26, '良'],
          [9, 53, 33, 47, 0.64, 50, 17, '良'],
          [10, 80, 55, 80, 1.01, 75, 24, '良'],
          [11, 117, 81, 124, 1.03, 45, 24, '轻度污染'],
          [12, 99, 71, 142, 1.1, 62, 42, '良'],
          [13, 95, 69, 130, 1.28, 74, 50, '良'],
          [14, 116, 87, 131, 1.47, 84, 40, '轻度污染'],
          [15, 108, 80, 121, 1.3, 85, 37, '轻度污染'],
          [16, 134, 83, 167, 1.16, 57, 43, '轻度污染'],
          [17, 79, 43, 107, 1.05, 59, 37, '良'],
          [18, 71, 46, 89, 0.86, 64, 25, '良'],
          [19, 97, 71, 113, 1.17, 88, 31, '良'],
          [20, 84, 57, 91, 0.85, 55, 31, '良'],
          [21, 87, 63, 101, 0.9, 56, 41, '良'],
          [22, 104, 77, 119, 1.09, 73, 48, '轻度污染'],
          [23, 87, 62, 100, 1, 72, 28, '良'],
          [24, 168, 128, 172, 1.49, 97, 56, '中度污染'],
          [25, 65, 45, 51, 0.74, 39, 17, '良'],
          [26, 39, 24, 38, 0.61, 47, 17, '优'],
          [27, 39, 24, 39, 0.59, 50, 19, '优'],
          [28, 93, 68, 96, 1.05, 79, 29, '良'],
          [29, 188, 143, 197, 1.66, 99, 51, '中度污染'],
          [30, 174, 131, 174, 1.55, 108, 50, '中度污染'],
          [31, 187, 143, 201, 1.39, 89, 53, '中度污染']
        ];
        const schema = [{
            name: 'date',
            index: 0,
            text: '日'
          },
          {
            name: 'AQIindex',
            index: 1,
            text: 'AQI指数'
          },
          {
            name: 'PM25',
            index: 2,
            text: 'PM2.5'
          },
          {
            name: 'PM10',
            index: 3,
            text: 'PM10'
          },
          {
            name: 'CO',
            index: 4,
            text: '一氧化碳（CO）'
          },
          {
            name: 'NO2',
            index: 5,
            text: '二氧化氮（NO2）'
          },
          {
            name: 'SO2',
            index: 6,
            text: '二氧化硫（SO2）'
          }
        ];
        const itemStyle = {
          opacity: 0.8,
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowColor: 'rgba(0,0,0,0.3)'
        };
        option = {
          color: ['#dd4444', '#fec42c', '#80F1BE'],
          legend: {
            top: 10,
            data: ['北京', '上海', '广州'],
            textStyle: {
              fontSize: 16
            }
          },
          grid: {
            left: '10%',
            right: 150,
            top: '18%',
            bottom: '10%'
          },
          tooltip: {
            backgroundColor: 'rgba(255,255,255,0.7)',
            formatter: function(param) {
              var value = param.value;
              // prettier-ignore
              return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                param.seriesName + ' ' + value[0] + '日：' +
                value[7] +
                '</div>' +
                schema[1].text + '：' + value[1] + '<br>' +
                schema[2].text + '：' + value[2] + '<br>' +
                schema[3].text + '：' + value[3] + '<br>' +
                schema[4].text + '：' + value[4] + '<br>' +
                schema[5].text + '：' + value[5] + '<br>' +
                schema[6].text + '：' + value[6] + '<br>';
            }
          },
          xAxis: {
            type: 'value',
            name: '日期',
            nameGap: 16,
            nameTextStyle: {
              fontSize: 16
            },
            max: 31,
            splitLine: {
              show: false
            }
          },
          yAxis: {
            type: 'value',
            name: 'AQI指数',
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
              fontSize: 16
            },
            splitLine: {
              show: false
            }
          },
          visualMap: [{
              left: 'right',
              top: '10%',
              dimension: 2,
              min: 0,
              max: 250,
              itemWidth: 30,
              itemHeight: 120,
              calculable: true,
              precision: 0.1,
              text: ['圆形大小：PM2.5'],
              textGap: 30,
              inRange: {
                symbolSize: [10, 70]
              },
              outOfRange: {
                symbolSize: [10, 70],
                color: ['rgba(255,255,255,0.4)']
              },
              controller: {
                inRange: {
                  color: ['#c23531']
                },
                outOfRange: {
                  color: ['#999']
                }
              }
            },
            {
              left: 'right',
              bottom: '5%',
              dimension: 6,
              min: 0,
              max: 50,
              itemHeight: 120,
              text: ['明暗：二氧化硫'],
              textGap: 30,
              inRange: {
                colorLightness: [0.9, 0.5]
              },
              outOfRange: {
                color: ['rgba(255,255,255,0.4)']
              },
              controller: {
                inRange: {
                  color: ['#c23531']
                },
                outOfRange: {
                  color: ['#999']
                }
              }
            }
          ],
          series: [{
              name: '北京',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataBJ
            },
            {
              name: '上海',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataSH
            },
            {
              name: '广州',
              type: 'scatter',
              itemStyle: itemStyle,
              data: dataGZ
            }
          ]
        };

        option && myChart.setOption(option);

      },
      leida() {
        let chartDom = document.getElementById('echarts');
        let myChart = echarts.init(chartDom, 'dark');
        let option;

        option = {
          title: {
            text: 'Basic Radar Chart'
          },
          legend: {
            data: ['Allocated Budget', 'Actual Spending']
          },
          radar: {
            // shape: 'circle',
            indicator: [
              { name: '北京', max: 6500 },
              { name: '上海', max: 16000 },
              { name: '成都', max: 30000 },
              { name: '重庆', max: 38000 },
              { name: '西安', max: 52000 },
              { name: '广州', max: 25000 }
            ]
          },
          series: [
            {
              name: '',
              type: 'radar',
              data: [
                {
                  value: [4200, 3000, 20000, 35000, 50000, 18000],
                  name: 'Allocated Budget'
                },
                {
                  value: [5000, 14000, 28000, 26000, 42000, 21000],
                  name: 'Actual Spending'
                }
              ]
            }
          ]
        };

        option && myChart.setOption(option);
      },
      reli() {
        let app = {};

        let chartDom = document.getElementById('echarts');
        let myChart = echarts.init(chartDom, 'dark');
        let option;

        let noise = getNoiseHelper();
        let xData = [];
        let yData = [];
        noise.seed(Math.random());
        function generateData(theta, min, max) {
          let data = [];
          for (let i = 0; i <= 200; i++) {
            for (let j = 0; j <= 100; j++) {
              // var x = (max - min) * i / 200 + min;
              // var y = (max - min) * j / 100 + min;
              data.push([i, j, noise.perlin2(i / 40, j / 20) + 0.5]);
              // data.push([i, j, normalDist(theta, x) * normalDist(theta, y)]);
            }
            xData.push(i);
          }
          for (var j = 0; j < 100; j++) {
            yData.push(j);
          }
          return data;
        }
        var data = generateData(2, -5, 5);
        option = {
          tooltip: {},
          xAxis: {
            type: 'category',
            data: xData
          },
          yAxis: {
            type: 'category',
            data: yData
          },
          visualMap: {
            min: 0,
            max: 1,
            calculable: true,
            realtime: false,
            inRange: {
              color: [
                '#313695',
                '#4575b4',
                '#74add1',
                '#abd9e9',
                '#e0f3f8',
                '#ffffbf',
                '#fee090',
                '#fdae61',
                '#f46d43',
                '#d73027',
                '#a50026'
              ]
            }
          },
          series: [
            {
              name: 'Gaussian',
              type: 'heatmap',
              data: data,
              emphasis: {
                itemStyle: {
                  borderColor: '#333',
                  borderWidth: 1
                }
              },
              progressive: 1000,
              animation: false
            }
          ]
        };
        ///////////////////////////////////////////////////////////////////////////
        // Simplex and perlin noise helper from https://github.com/josephg/noisejs
        ///////////////////////////////////////////////////////////////////////////
        function getNoiseHelper(global) {
          var module = {};
          function Grad(x, y, z) {
            this.x = x;
            this.y = y;
            this.z = z;
          }
          Grad.prototype.dot2 = function (x, y) {
            return this.x * x + this.y * y;
          };
          Grad.prototype.dot3 = function (x, y, z) {
            return this.x * x + this.y * y + this.z * z;
          };
          var grad3 = [
            new Grad(1, 1, 0),
            new Grad(-1, 1, 0),
            new Grad(1, -1, 0),
            new Grad(-1, -1, 0),
            new Grad(1, 0, 1),
            new Grad(-1, 0, 1),
            new Grad(1, 0, -1),
            new Grad(-1, 0, -1),
            new Grad(0, 1, 1),
            new Grad(0, -1, 1),
            new Grad(0, 1, -1),
            new Grad(0, -1, -1)
          ];
          var p = [
            151, 160, 137, 91, 90, 15, 131, 13, 201, 95, 96, 53, 194, 233, 7, 225, 140,
            36, 103, 30, 69, 142, 8, 99, 37, 240, 21, 10, 23, 190, 6, 148, 247, 120,
            234, 75, 0, 26, 197, 62, 94, 252, 219, 203, 117, 35, 11, 32, 57, 177, 33,
            88, 237, 149, 56, 87, 174, 20, 125, 136, 171, 168, 68, 175, 74, 165, 71,
            134, 139, 48, 27, 166, 77, 146, 158, 231, 83, 111, 229, 122, 60, 211, 133,
            230, 220, 105, 92, 41, 55, 46, 245, 40, 244, 102, 143, 54, 65, 25, 63, 161,
            1, 216, 80, 73, 209, 76, 132, 187, 208, 89, 18, 169, 200, 196, 135, 130,
            116, 188, 159, 86, 164, 100, 109, 198, 173, 186, 3, 64, 52, 217, 226, 250,
            124, 123, 5, 202, 38, 147, 118, 126, 255, 82, 85, 212, 207, 206, 59, 227,
            47, 16, 58, 17, 182, 189, 28, 42, 223, 183, 170, 213, 119, 248, 152, 2, 44,
            154, 163, 70, 221, 153, 101, 155, 167, 43, 172, 9, 129, 22, 39, 253, 19, 98,
            108, 110, 79, 113, 224, 232, 178, 185, 112, 104, 218, 246, 97, 228, 251, 34,
            242, 193, 238, 210, 144, 12, 191, 179, 162, 241, 81, 51, 145, 235, 249, 14,
            239, 107, 49, 192, 214, 31, 181, 199, 106, 157, 184, 84, 204, 176, 115, 121,
            50, 45, 127, 4, 150, 254, 138, 236, 205, 93, 222, 114, 67, 29, 24, 72, 243,
            141, 128, 195, 78, 66, 215, 61, 156, 180
          ];
          // To remove the need for index wrapping, double the permutation table length
          var perm = new Array(512);
          var gradP = new Array(512);
          // This isn't a very good seeding function, but it works ok. It supports 2^16
          // different seed values. Write something better if you need more seeds.
          module.seed = function (seed) {
            if (seed > 0 && seed < 1) {
              // Scale the seed out
              seed *= 65536;
            }
            seed = Math.floor(seed);
            if (seed < 256) {
              seed |= seed << 8;
            }
            for (var i = 0; i < 256; i++) {
              var v;
              if (i & 1) {
                v = p[i] ^ (seed & 255);
              } else {
                v = p[i] ^ ((seed >> 8) & 255);
              }
              perm[i] = perm[i + 256] = v;
              gradP[i] = gradP[i + 256] = grad3[v % 12];
            }
          };
          module.seed(0);
          /*
            for(var i=0; i<256; i++) {
              perm[i] = perm[i + 256] = p[i];
              gradP[i] = gradP[i + 256] = grad3[perm[i] % 12];
            }*/
          // Skewing and unskewing factors for 2, 3, and 4 dimensions
          var F2 = 0.5 * (Math.sqrt(3) - 1);
          var G2 = (3 - Math.sqrt(3)) / 6;
          var F3 = 1 / 3;
          var G3 = 1 / 6;
          // 2D simplex noise
          module.simplex2 = function (xin, yin) {
            var n0, n1, n2; // Noise contributions from the three corners
            // Skew the input space to determine which simplex cell we're in
            var s = (xin + yin) * F2; // Hairy factor for 2D
            var i = Math.floor(xin + s);
            var j = Math.floor(yin + s);
            var t = (i + j) * G2;
            var x0 = xin - i + t; // The x,y distances from the cell origin, unskewed.
            var y0 = yin - j + t;
            // For the 2D case, the simplex shape is an equilateral triangle.
            // Determine which simplex we are in.
            var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords
            if (x0 > y0) {
              // lower triangle, XY order: (0,0)->(1,0)->(1,1)
              i1 = 1;
              j1 = 0;
            } else {
              // upper triangle, YX order: (0,0)->(0,1)->(1,1)
              i1 = 0;
              j1 = 1;
            }
            // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and
            // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where
            // c = (3-sqrt(3))/6
            var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords
            var y1 = y0 - j1 + G2;
            var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords
            var y2 = y0 - 1 + 2 * G2;
            // Work out the hashed gradient indices of the three simplex corners
            i &= 255;
            j &= 255;
            var gi0 = gradP[i + perm[j]];
            var gi1 = gradP[i + i1 + perm[j + j1]];
            var gi2 = gradP[i + 1 + perm[j + 1]];
            // Calculate the contribution from the three corners
            var t0 = 0.5 - x0 * x0 - y0 * y0;
            if (t0 < 0) {
              n0 = 0;
            } else {
              t0 *= t0;
              n0 = t0 * t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient
            }
            var t1 = 0.5 - x1 * x1 - y1 * y1;
            if (t1 < 0) {
              n1 = 0;
            } else {
              t1 *= t1;
              n1 = t1 * t1 * gi1.dot2(x1, y1);
            }
            var t2 = 0.5 - x2 * x2 - y2 * y2;
            if (t2 < 0) {
              n2 = 0;
            } else {
              t2 *= t2;
              n2 = t2 * t2 * gi2.dot2(x2, y2);
            }
            // Add contributions from each corner to get the final noise value.
            // The result is scaled to return values in the interval [-1,1].
            return 70 * (n0 + n1 + n2);
          };
          // 3D simplex noise
          module.simplex3 = function (xin, yin, zin) {
            var n0, n1, n2, n3; // Noise contributions from the four corners
            // Skew the input space to determine which simplex cell we're in
            var s = (xin + yin + zin) * F3; // Hairy factor for 2D
            var i = Math.floor(xin + s);
            var j = Math.floor(yin + s);
            var k = Math.floor(zin + s);
            var t = (i + j + k) * G3;
            var x0 = xin - i + t; // The x,y distances from the cell origin, unskewed.
            var y0 = yin - j + t;
            var z0 = zin - k + t;
            // For the 3D case, the simplex shape is a slightly irregular tetrahedron.
            // Determine which simplex we are in.
            var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords
            var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords
            if (x0 >= y0) {
              if (y0 >= z0) {
                i1 = 1;
                j1 = 0;
                k1 = 0;
                i2 = 1;
                j2 = 1;
                k2 = 0;
              } else if (x0 >= z0) {
                i1 = 1;
                j1 = 0;
                k1 = 0;
                i2 = 1;
                j2 = 0;
                k2 = 1;
              } else {
                i1 = 0;
                j1 = 0;
                k1 = 1;
                i2 = 1;
                j2 = 0;
                k2 = 1;
              }
            } else {
              if (y0 < z0) {
                i1 = 0;
                j1 = 0;
                k1 = 1;
                i2 = 0;
                j2 = 1;
                k2 = 1;
              } else if (x0 < z0) {
                i1 = 0;
                j1 = 1;
                k1 = 0;
                i2 = 0;
                j2 = 1;
                k2 = 1;
              } else {
                i1 = 0;
                j1 = 1;
                k1 = 0;
                i2 = 1;
                j2 = 1;
                k2 = 0;
              }
            }
            // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z),
            // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and
            // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where
            // c = 1/6.
            var x1 = x0 - i1 + G3; // Offsets for second corner
            var y1 = y0 - j1 + G3;
            var z1 = z0 - k1 + G3;
            var x2 = x0 - i2 + 2 * G3; // Offsets for third corner
            var y2 = y0 - j2 + 2 * G3;
            var z2 = z0 - k2 + 2 * G3;
            var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner
            var y3 = y0 - 1 + 3 * G3;
            var z3 = z0 - 1 + 3 * G3;
            // Work out the hashed gradient indices of the four simplex corners
            i &= 255;
            j &= 255;
            k &= 255;
            var gi0 = gradP[i + perm[j + perm[k]]];
            var gi1 = gradP[i + i1 + perm[j + j1 + perm[k + k1]]];
            var gi2 = gradP[i + i2 + perm[j + j2 + perm[k + k2]]];
            var gi3 = gradP[i + 1 + perm[j + 1 + perm[k + 1]]];
            // Calculate the contribution from the four corners
            var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0;
            if (t0 < 0) {
              n0 = 0;
            } else {
              t0 *= t0;
              n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient
            }
            var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1;
            if (t1 < 0) {
              n1 = 0;
            } else {
              t1 *= t1;
              n1 = t1 * t1 * gi1.dot3(x1, y1, z1);
            }
            var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2;
            if (t2 < 0) {
              n2 = 0;
            } else {
              t2 *= t2;
              n2 = t2 * t2 * gi2.dot3(x2, y2, z2);
            }
            var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3;
            if (t3 < 0) {
              n3 = 0;
            } else {
              t3 *= t3;
              n3 = t3 * t3 * gi3.dot3(x3, y3, z3);
            }
            // Add contributions from each corner to get the final noise value.
            // The result is scaled to return values in the interval [-1,1].
            return 32 * (n0 + n1 + n2 + n3);
          };
          // ##### Perlin noise stuff
          function fade(t) {
            return t * t * t * (t * (t * 6 - 15) + 10);
          }
          function lerp(a, b, t) {
            return (1 - t) * a + t * b;
          }
          // 2D Perlin Noise
          module.perlin2 = function (x, y) {
            // Find unit grid cell containing point
            var X = Math.floor(x),
              Y = Math.floor(y);
            // Get relative xy coordinates of point within that cell
            x = x - X;
            y = y - Y;
            // Wrap the integer cells at 255 (smaller integer period can be introduced here)
            X = X & 255;
            Y = Y & 255;
            // Calculate noise contributions from each of the four corners
            var n00 = gradP[X + perm[Y]].dot2(x, y);
            var n01 = gradP[X + perm[Y + 1]].dot2(x, y - 1);
            var n10 = gradP[X + 1 + perm[Y]].dot2(x - 1, y);
            var n11 = gradP[X + 1 + perm[Y + 1]].dot2(x - 1, y - 1);
            // Compute the fade curve value for x
            var u = fade(x);
            // Interpolate the four results
            return lerp(lerp(n00, n10, u), lerp(n01, n11, u), fade(y));
          };
          // 3D Perlin Noise
          module.perlin3 = function (x, y, z) {
            // Find unit grid cell containing point
            var X = Math.floor(x),
              Y = Math.floor(y),
              Z = Math.floor(z);
            // Get relative xyz coordinates of point within that cell
            x = x - X;
            y = y - Y;
            z = z - Z;
            // Wrap the integer cells at 255 (smaller integer period can be introduced here)
            X = X & 255;
            Y = Y & 255;
            Z = Z & 255;
            // Calculate noise contributions from each of the eight corners
            var n000 = gradP[X + perm[Y + perm[Z]]].dot3(x, y, z);
            var n001 = gradP[X + perm[Y + perm[Z + 1]]].dot3(x, y, z - 1);
            var n010 = gradP[X + perm[Y + 1 + perm[Z]]].dot3(x, y - 1, z);
            var n011 = gradP[X + perm[Y + 1 + perm[Z + 1]]].dot3(x, y - 1, z - 1);
            var n100 = gradP[X + 1 + perm[Y + perm[Z]]].dot3(x - 1, y, z);
            var n101 = gradP[X + 1 + perm[Y + perm[Z + 1]]].dot3(x - 1, y, z - 1);
            var n110 = gradP[X + 1 + perm[Y + 1 + perm[Z]]].dot3(x - 1, y - 1, z);
            var n111 = gradP[X + 1 + perm[Y + 1 + perm[Z + 1]]].dot3(
              x - 1,
              y - 1,
              z - 1
            );
            // Compute the fade curve value for x, y, z
            var u = fade(x);
            var v = fade(y);
            var w = fade(z);
            // Interpolate
            return lerp(
              lerp(lerp(n000, n100, u), lerp(n001, n101, u), w),
              lerp(lerp(n010, n110, u), lerp(n011, n111, u), w),
              v
            );
          };
          return module;
        }

        option && myChart.setOption(option);
      }
    }
  }
</script>

<style lang="scss" scoped>
  #box {
    padding: 30px;
    background-color: #120F24;
  }
</style>
